import React, { Component } from 'react'
// 类组件中的状态
// 状态及类组件中的data 数据
// 定义状态有2种方式:
// 第一种: 直接在构造器中定义
// 第二种方式 以类成员属性的形式定义状态 (常用)

// 修改state 数据 方式2种
//第一种:对象形式修改 this.setState({key:value})
//第二种修改state 数据方式 : 以函数形式修改 this.setState((state)=>{return {count:新值}})

// 问题? 当state中的数据有多个时候,修改某一个会替换替他数据吗?
// setState 方式修改数据是合并不是替换

// 问题2? 修改state 数据两种方式对象和函数形式区别?

export default class Mycls extends Component {
    constructor() {
        super()
        // 第一种方式定义响应式状态数据
        // this.state = {
        //     count: 0
        // }
    }
    addCount() {
        this.setState({
            count: this.state.count + 1
        })
    }
    // 第二种方式: 定义响应式状态数据 ()
    state = {
        count: 100,
        num: 10000
    }

    addCount1() {
        this.setState((state) => {
            // 该state 对象就是 this.state
            // console.log(state);
            return {
                count: state.count + 5
            }
        })
    }

    render() {
        return (
            <div>
                {/* <p onClick={this.addCount.bind(this)}>count:{this.state.count}</p> */}
                {/*直接在行内修改*/}
                {/* <p onClick={() => {
                    this.setState({
                        count: this.state.count + 10
                    })
                }}>count:{this.state.count}</p> */}
                {/* 第二种方式修改state数据 */}
                <p onClick={this.addCount1.bind(this)}>count:{this.state.count}</p>
            </div>
        )
    }
}
